<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<!-- 元素是特殊的节点 -->
<style>
.tablebox{
width: 600px;
margin: 0 auto;
margin-top: 50px;
text-align: center;

}

</style>
</head>
<body>
<table class="tablebox" border="1px">
<th style="text-align: center" colspan="5">

<input type="button" value="添加"  onclick="append()" />
<input type="button" value="删除" onclick="remove()"/>
</th>
<tr>
<th><input type="checkbox" id="checkAll">全选</th>
<th>编号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>

<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>1</td>
<td>三国演义</td>
<td class="count">1</td>
<td class="price">40</td>
</tr>

<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>2</td>
<td>水浒传</td>
<td class="count">1</td>
<td class="price">40</td>
</tr>

<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>3</td>
<td>西游记</td>
<td class="count">1</td>
<td class="price">40</td>
</tr>

<tr>
<td><input type="checkbox" class="checkOne"></td>
<td>4</td>
<td>红楼梦</td>
<td class="count">1</td>
<td class="price">40</td>
</tr>


<tr>
<td colspan="5"><input id="total">
&nbsp;&nbsp;&nbsp;<button onclick="getTotal()">计算总价</button>
</td>
</tr>



</table>
<script>
var checkBoxs=document.querySelectorAll('input.checkOne');
document.onclick=function(e){
	checkBoxs=document.querySelectorAll('input.checkOne');
if(e.target.id=="checkAll"){

if(e.target.checked){
for(let checkBox of checkBoxs){
checkBox.checked=true;
}
}else{
for(let checkBox of checkBoxs){
checkBox.checked=false;
}
}


}

}

for(let checkBox of checkBoxs){
checkBox.onclick=function(){


var nametd=this.parentElement.
nextElementSibling.nextElementSibling;//一定加element

alert(nametd.innerHTML);

}

}
function append(){

var tdbody=document.querySelector('table').firstElementChild;//字节点==tbody
var tr=document.createElement('tr');
//获取字
var lasttr=tdbody.lastElementChild.previousElementSibling;
// var lasttr=tdbody.lastElementChild;
var id=Number(lasttr.childNodes[3].innerHTML)+1;
// var id=lasttr.childElementCount;
// var id=1;
console.log(id)


tr.innerHTML=`
<td><input type="checkbox" class="checkOne"></td>
<td>`+id+`</td>
<td>西游记</td>
<td class="count">1</td>
<td class="price">29</td>
`;
// tdbody.appendChild(tr);

tdbody.insertBefore(tr,tdbody.lastElementChild);

}




function remove(){
var checkedBoxs=document.
querySelectorAll('input.checkOne:checked');

for(let checkedBox of checkedBoxs){
var delEle=checkedBox.parentElement.parentElement;
var targetEle=delEle.parentElement;
targetEle.removeChild(delEle);

}

}
function getTotal(){
	var checkedBoxs=document.
	querySelectorAll('input.checkOne:checked');
	

	
	let sum=0
	// console.log(checkedBoxs)
	for(let checkedBox of checkedBoxs){
		// console.log(checkedBox.parentElement.parentElement)
		let grandparent=checkedBox.parentElement.parentElement;
		let price=grandparent.querySelector('.price').innerHTML;
		let count=grandparent.querySelector('.count').innerHTML;
		sum+=price*count
	}
	
	document.querySelector('#total').value=sum
	// console.log(sum)

	
	
	
	
// var counts=document.querySelectorAll('td.count');

// var prices=document.querySelectorAll('.price');

// var sum=0;
// for(let i=0;i<counts.length;i++){
// var count =	Number(counts[i].innerHTML);
// var price = Number(prices[i].innerHTML);

// sum+=count*price
// }
// document.querySelector('#total').value=sum;

 }

 var app = document.querySelector("#app");
        function up(e) {
			//e.target获取点击的元素
			//这一行上移
			
        }

        function down(e) {
			//这一行下移
        }

        function del(e) {
            //删除这一行
        }

        function add(e){
			//根据输入框添加一行
        }





</script>
</body>
</html>
